<template>
  <div>
    <button @click="onClick">按钮</button>
    <p v-color="color" v-bgcolor="bgcolor">Hello world!</p>
  </div>
</template>

<script>
export default {
  // 局部注册
  directives: {
    // 写法一
    color(elem, binding) {
      // inserted 和 update 执行相同的回调函数
      elem.style.color = binding.value
    },
    // 写法二
    bgcolor: {
      inserted(elem, binding) {
        elem.style.backgroundColor = binding.value
      },
      update(elem, binding) {
        elem.style.backgroundColor = binding.value
      }
    }
  },
  data: () => ({
    color: '#17f',
    bgcolor: 'white'
  }),
  methods: {
    onClick() {
      this.color = this.color === '#17f' ? 'white' : '#17f'
      this.bgcolor = this.bgcolor === 'white' ? '#17f' : 'white'
    }
  }
}
</script>
